<template>
	<!-- D:/project/app/ydz-app-uniapp/static/images/knowledge/clinicaldetail -->
	<view class="pagebody">
		<view class="topbox">
			<NavHeader></NavHeader>
		</view>
		<view class="clincontent borderbox bgfff">
			<view class="title pos-rel">
				<!-- <view class="fz28 fwbold pos-abs beforelog" style="top: 4rpx;left: 0;">
					{{ clinicalInfo.stageName }}
				</view> -->
				<view class="fz48 fwbold titletext lineclamp2">
					{{ clinicalInfo.title }}
				</view>
				<view class=" justify-start align-center mt30">
					<image src="@/static/images/knowledge/clinicaldetail/attention.png" mode=""
						style="flex-shrink: 0;margin-right: 8rpx;;width: 24rpx;height: 24rpx;"></image>
					<view style="color: #576260;font-size: 22rpx;">
						申请临床入组的条件较多，建议您直接咨询药队长临床招募医学顾问
					</view>
				</view>
			</view>
			<view class="color303b39 mt30 "
				style="font-weight: 500;font-size: 36rpx;color: #303B39;line-height: 72rpx; text-indent: 2em;" v-html="clinicalInfo.content">
			</view>
			<view class="process">
				<view class="justify-start align-center">
					<image src="@/static/images/knowledge/clinicaldetail/rightgreen.png" mode=""
						style="width: 36rpx;height: 36rpx;margin-right: 8rpx;"></image>
					<view class=""
						style="color: #00977C;font-weight: 800;font-size: 36rpx;color: #00977C;line-height: 36rpx;">
						临床招募流程
					</view>
				</view>
				<view class="flex-row justify-between" style="padding: 0 24rpx; margin-top: 48rpx;">
					<view class="processbox pos-rel justify-center align-center">
						<image src="@/static/images/knowledge/clinicaldetail/czxm.png" mode=""
							style="width: 75rpx;height: 75rpx;"></image>
						<view class="line">
						</view>
						<image style="width: 24rpx;height: 24rpx;right: -24rpx;" class="pos-abs"
							src="@/static/images/knowledge/clinicaldetail/lcjt.png" mode=""></image>
						<view class="bottext pos-abs flex-row align-center fz28"
							style="bottom: -44rpx; color: #00977C;width: 148rpx;">
							<view class=""
								style="margin-right: 8rpx;width: 28rpx;height: 28rpx;background: linear-gradient( 140deg, #4EF2C9 0%, #00D9B2 100%);border-radius: 2rpx;color: #fff;text-align: center;line-height: 28rpx;">
								1
							</view>
							查找项目
						</view>
					</view>
					<view class="processbox pos-rel justify-center align-center">
						<image src="@/static/images/knowledge/clinicaldetail/lxwm.png" mode=""
							style="width: 75rpx;height: 75rpx;"></image>
						<view class="line">
						</view>
						<image style="width: 24rpx;height: 24rpx;right: -39rpx;" class="pos-abs"
							src="@/static/images/knowledge/clinicaldetail/lcjt.png" mode=""></image>
						<view class="bottext pos-abs flex-row align-center fz28"
							style="bottom: -44rpx; color: #00977C;width: 148rpx;">
							<view class=""
								style="margin-right: 8rpx;width: 28rpx;height: 28rpx;background: linear-gradient( 140deg, #4EF2C9 0%, #00D9B2 100%);border-radius: 2rpx;color: #fff;text-align: center;line-height: 28rpx;">
								2
							</view>
							联系我们
						</view>
					</view>
					<view class="processbox pos-rel justify-center align-center">
						<image src="@/static/images/knowledge/clinicaldetail/qsty.png" mode=""
							style="width: 75rpx;height: 75rpx;"></image>
						<view class="line">
						</view>
						<image style="width: 24rpx;height: 24rpx;right: -70rpx;" class="pos-abs"
							src="@/static/images/knowledge/clinicaldetail/lcjt.png" mode=""></image>
						<view class="bottext pos-abs flex-row align-center fz28"
							style="bottom: -44rpx; color: #00977C;width: 148rpx;">
							<view class=""
								style="margin-right: 8rpx;width: 28rpx;height: 28rpx;background: linear-gradient( 140deg, #4EF2C9 0%, #00D9B2 100%);border-radius: 2rpx;color: #fff;text-align: center;line-height: 28rpx;">
								3
							</view>
							签署同意
						</view>
					</view>
					<view class="processbox pos-rel justify-center align-center">
						<image src="@/static/images/knowledge/clinicaldetail/cgrz.png" mode=""
							style="width: 75rpx;height: 75rpx;"></image>
						<view class="bottext pos-abs flex-row align-center fz28"
							style="bottom: -44rpx; color: #00977C;width: 148rpx;">
							<view class=""
								style="margin-right: 8rpx;width: 28rpx;height: 28rpx;background: linear-gradient( 140deg, #4EF2C9 0%, #00D9B2 100%);border-radius: 2rpx;color: #fff;text-align: center;line-height: 28rpx;">
								4
							</view>
							成功入组
						</view>
					</view>
				</view>
				<view class="bgfff wxts" style="height: 272rpx;margin-top: 92rpx;border-radius: 8rpx;">
					<span style="color:#00D9B2">温馨提示：</span>药队长临床招募医学顾问，拥有专业医学背景，了解疾病、了解招募细节要求，可根据患者的具体情况，推荐更适合的项目，或组合搭配项目，入组成功率更高。<span
						@click="toWxkf" style="color: #F46803;text-decoration: underline;">点击免费咨询药队长临床招募医学顾问。</span>
				</view>
			</view>
			<view class="tablebox">
				<view class="row flex-row">
					<view class="left">
						项目用药
					</view>
					<view class="right fwbold">
						{{ clinicalInfo.drug }}
					</view>
				</view>
				<view class="row colorrow flex-row">
					<view class="left">
						适应症
					</view>
					<view class="right">
						{{ clinicalInfo.indications }}
					</view>
				</view>
				<view class="row flex-row">
					<view class="left">
						治疗阶段
					</view>
					<view class="right fwbold">
						{{ clinicalInfo.treatmentName }}
					</view>
				</view>
				<view class="row colorrow flex-row">
					<view class="left">
						试验分期
					</view>
					<view class="right fwbold">
						{{ clinicalInfo.trialName }}
					</view>
				</view>
				<view class="row flex-row">
					<view class="left">
						试验中心
					</view>
					<view class="right fwbold">
						{{ clinicalInfo.areaName }}
					</view>
				</view>
				<!-- <view class="row colorrow flex-row">
					<view class="left">
						入选条件
					</view>
					<view class="right" v-html="clinicalInfo.selected">
					</view>
				</view>
				<view class="row flex-row">
					<view class="left">
						排除条件
					</view>
					<view class="right" v-html="clinicalInfo.exclusion">
					</view>
				</view> -->	
			</view>
			<view class="content_info">
				<h2 class="fwbold">入选条件</h2>
				<view 
					v-html="clinicalInfo.selected">
				</view>
				
				<h2 class="fwbold">排除条件</h2>
				<view 
					v-html="clinicalInfo.exclusion">
				</view>
			</view>
			<AdvCom :type='2'></AdvCom>
		</view>
		
		<AboutClinical :clinicalList = "clinicalList"></AboutClinical>
		<AboutDrug :drugList = "drugList"></AboutDrug>
		<community :isshort="1"></community>
		<typenews :type="2" :disname="disease.name" :disid="disease.id" :list="ZNNewsList"></typenews>
		<AdvCom :type='2'></AdvCom>
		<typenews :type="1" :disname="disease.name" :disid="disease.id" :list="ZSNewsList"></typenews>
		<HotnewsCom></HotnewsCom>
		
		<FixedFoot :typeid="2"></FixedFoot>
	</view>
</template>

<script>
	import FixedFoot from '../../layouts/fixedfoot.vue';
	import NavHeader from '../../layouts/navheader.vue';
	import AdvCom from '../../layouts/advcome.vue';
	import AboutClinical from '../../components/generalcom/aboutclinical.vue';
	import AboutDrug from '../../components/generalcom/aboutdrug.vue';
	import community from '../../components/generalcom/community.vue'
	import typenews from '../../components/generalcom/typenews.vue';
	import HotnewsCom from '../../components/generalcom/hotnewcom.vue';
	import {
		getClinicalById,selectClinicalList,getClinicalList,getDrugList,getDiseaseById,getotherlist
	} from '@/api/api.js'
		import {
			getInfo
		} from '@/api/login'
	
	export default {
		components: {
			FixedFoot,
			NavHeader,
			AboutDrug,
			AboutClinical,
			AdvCom,
			community,
			typenews,
			HotnewsCom
		},
		data(){
			return {
				disease:{},
				clinicalInfo:{},
				clinicalList:[],
				drugList:[],
				ZNNewsList:[],
				ZSNewsList:[],
				diseaseIds:[]
			}
		},
		onLoad(option) {
			this.getUser();
			this.getClinical(option.id);
			
		},
		methods: {
			getUser() {
				getInfo().then(res => {
					this.userDocument = res.userDocument
					console.log("this.userDocument.diseaseId",this.userDocument.diseaseId)
					this.getDiseaseById(this.userDocument.diseaseId)
					
				})
			},
			getDiseaseById(id){
				getDiseaseById(id).then(res => {
					if(200 == res.code){
						this.disease = res.data
						this.getotherlist()
					}
				})
			},
			getotherlist(){
				let param = {
					"pageNum": 1,
					"pageSize": 5,
					"type":"02",
					"state":"1",
					"orderByColumn" : "create_time",
					"isAsc":"desc",
					"diseaseId":this.disease.id != null ? this.disease.id : null
				}
				getotherlist(param).then(res => {
					if(res.code == 200){
						this.ZNNewsList = res.rows
					}
				})
				let param1 = {
					"pageNum": 1,
					"pageSize": 5,
					"type":"01",
					"state":"1",
					"orderByColumn" : "create_time",
					"isAsc":"desc",
					"diseaseId":this.disease.id != null ? this.disease.id : null
				}
				getotherlist(param1).then(res => {
					if(res.code == 200){
						this.ZSNewsList = res.rows
						}
				})
			},
			// toWxkf() {
			// 	window.open('https://work.weixin.qq.com/ca/cawcdedcf41d9a6af6')
			// },
			toWxkf() {
				// window.open('https://work.weixin.qq.com/ca/cawcdedcf41d9a6af6')
					if (plus.os.name == 'Android') {
						if (
							plus.runtime.isApplicationExist({
								pname: 'com.tencent.mm'
							})
						) {
							plus.runtime.openURL(
								'https://work.weixin.qq.com/ca/cawcdedcf41d9a6af6',
								function(res) {
									console.log(res);
								}
							);
						} else {
							uni.showModal({
								title: '提示',
								content: '您还没有此APP,去下载',
								success: function(res) {
									if (res.confirm) {
										plus.runtime.openURL('https://a.app.qq.com/o/simple.jsp?pkgname=com.tencent.mm', function(res) {
											console.log(res);
										});
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					} else if (plus.os.name == 'iOS') {
						plus.runtime.launchApplication(
							{
								action:
									'https://work.weixin.qq.com/ca/cawcdedcf41d9a6af6'
							},
							function(e) {
								uni.showModal({
									title: '提示',
									content: '您还没有此APP,去下载',
									success: function(res) {
										if (res.confirm) {
											plus.runtime.openURL('https://a.app.qq.com/o/simple.jsp?pkgname=com.tencent.mm', function(res) {
												console.log(res);
											});
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							}
						);
					}
			
			
			},
			getClinical(id){
				getClinicalById(id).then(res => {
					if(res.code == 200){
						this.clinicalInfo = res.data
						console.log("this.clinicalInfo",this.clinicalInfo)
						// // this.diseaseIds = this.clinicalInfo.clinicalDiseaseList.map(disease => ({ diseaseId: disease.diseaseId }));
						// console.log("diseaseIds---：",this.diseaseIds)
						this.selectClinicalList(this.clinicalInfo.clinicalDiseaseList)
						this.getDrugList(this.clinicalInfo.clinicalDiseaseList)
					}
				})
			},
			selectClinicalList(diseaseList){
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"state":"1",
					"orderByColumn" : "create_time",
					"isAsc":"desc",
					"clinicalDiseaseList":diseaseList.length > 0 ? diseaseList:null
				}
				getClinicalList(param).then(res => {
					if(res.code == 200){
						this.clinicalList = res.rows
					}
				})
			},
			getDrugList(diseaseList){
				let param = {
					"pageNum": 1,
					"pageSize": 4,
					"state":"1",
					"orderByColumn" : "create_time",
					"isAsc":"desc",
					"drugDiseaseList":diseaseList.length > 0 ? diseaseList:null
				}
				getDrugList(param).then(res => {
					if(res.code == 200){
						this.drugList = res.rows
					}
				})
			},
		},
	
	}
</script>

<style lang="scss" scoped>
	.pagebody {
		padding-bottom: 136rpx;

		.topbox {
			padding: 20rpx 24rpx;
			background: #fff;
			border-bottom: 1px solid #dedede;
		}

		.clincontent {
			padding: 24rpx;
			border-radius: 0 0 32rpx 32rpx;

			.title {
				padding-bottom: 24rpx;
				border-bottom: 1rpx dashed #DFE2E7;

				.beforelog {
					text-align: center;
					line-height: 48rpx;
					width: 125rpx;
					height: 48rpx;
					background: linear-gradient(90deg, #FFF4E9 0%, #FFEAE9 100%);
					border-radius: 0px 24rpx 24rpx 0px;
					color: #FF5828;
				}

				.titletext {
					color: #303b39;
					line-height: 64rpx;
					text-align: justified;
					// text-indent: 150rpx;
				}
			}

			.process {
				background-color: #F6FAF9;
				padding: 32rpx 16rpx 24rpx;
				border-radius: 32rpx;

				.processbox {
					width: 100rpx;
					height: 100rpx;
					background: #FFFFFF;
					box-shadow: 0px 0px 21rpx 0px rgba(18, 223, 183, 0.2);
					border-radius: 50%;
					z-index: 999;

					.line {
						position: absolute;
						right: -76rpx;
						width: 76rpx;
						height: 0px;
						border-radius: 0px 0px 0px 0px;
						border-top: 1rpx dashed #00D9B2;
						z-index: 66;
					}
				}

				.wxts {
					padding: 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #303B39;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

			}

			.tablebox {
				margin-top: 24rpx;
				border-radius: 24rpx;
				border: 1px solid #D7DDDC;

				.row {
					padding: 16rpx 8rpx 16rpx 16rpx;

					.left {
						width: 150rpx;
						height: 32rpx;
						margin-top: 16rpx;
						border-right: 1rpx solid #D7DDDC;
						color: #576260;
						font-size: 32rpx;
						text-align: right;
						padding-right: 16rpx;
						flex-shrink: 0;
						line-height: 32rpx;
					}

					.right {
						padding-left: 16rpx;
						color: #303B39;
						font-size: 32rpx;
						line-height: 64rpx;
					}
				}

				.colorrow {
					background: #F6FAF9;
				}
			}
			.content_info{
				color: #293347;
				font-size: 36rpx;
				line-height: 72rpx;
				margin-top: 16rpx;
				margin-bottom: 16rpx;
				text-indent: 36rpx;
				::v-deep h2 {
					color: #00977C;;
					font-weight: bold;
					font-weight: 800;
					margin-top: 24rpx;
					margin-bottom: 24rpx;
					text-indent: 20rpx;
					font-size: 38rpx;
					line-height: 72rpx;
					position: relative;

					&::before {
						content: "";
						position: absolute;
						left: 0;
						top: 18rpx;
						width: 8rpx;
						height: 38rpx;
						background: #00D9B2;
						border-radius: 8rpx;
					  }
				}
		
				::v-deep h3 {
					color: #00977C;;
					font-weight: bold;
					font-weight: 800;
					margin-top: 24rpx;
					margin-bottom: 24rpx;
					text-indent: 20rpx;
					font-size: 36rpx;
					line-height: 72rpx;
				}
		
				::v-deep h4 {
					color: #00977C;;
					font-weight: bold;
					font-weight: 800;
					margin-top: 24rpx;
					margin-bottom: 24rpx;
					text-indent: 20rpx;
					font-size: 36rpx;
					line-height: 72rpx;
				}
		
				::v-deep p {
					color: #303B39;
					font-size: 36rpx;
					line-height: 72rpx;
					margin-top: 16rpx;
					margin-bottom: 16rpx;
					text-indent: 36rpx;
					font-weight: 500;
					text-indent: 20rpx;
				}
		
				::v-deep a {
					font-size: 36rpx;
					color: #00977C;
				}
			}
		}
	}
</style>